{% extends "base.html" %}
{% block page_title %}Add Project - Step {{ wizard.steps.step1 }}{% endblock %}

{% load i18n %}
{% load static %}
{% load render_bundle from webpack_loader %}

{% block head %}
{{ wizard.form.media }}
{{ form.media.css }}
{% endblock %}

{% block content %}
<div class="error-messages">{{ wizard.non_form_errors }}</div>
<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div class="card">
      <div class="cardface">
        <form action="." method="post" enctype="multipart/form-data">
          {% csrf_token %}
          {{ wizard.management_form }}

          <h1>Permissions</h1>
          <h3>Description</h3>
          <p>To help organize your labeling projects, you can assign special permissions to other project memebers. Project members can be assigned one of two roles:</p>
          <ul class="list-group">
            <li class="list-group-item"><strong>Admins</strong> are able to update the project description, upload additional data, control project permissions, and annotate data.</li>
            <li class="list-group-item"><strong>Coders</strong> are able to view project details and annotate data.</li>
          </ul>
          <h3>Instructions</h3>
          <p>Please select your project members and assign their role types below. Clicking the <code>add permisssions</code> button adds more rows to the form. If you decide that you want to remove a permission after adding it, click the <code>remove permission</code> button next to the inputs to remove the permission. If an intended project member is not listed below, please check to see if they have created an account.</p>
          <p><i>Permissions Notes:</i></p>
          <ul class="list-group">
            <li class="list-group-item">You (the project creator) are always assigned <strong>Admin</strong> privileges.</li>
            <li class="list-group-item">Each user profile can only be assigned one permission type.</li>
            <li class="list-group-item">Each row must be completely filled in with both a profile and permission.</li>
            <li class="list-group-item">You can update permissions after creating a project</li>
          </ul>
          <table class="table table-striped">
            {{ wizard.form.management_form }}
            <div class="error-messages">{{ wizard.form.non_form_errors }}</div>
            {% for form in wizard.form %}
              {% if forloop.first %}
                <thead>
                <tr>
                  {% for field in form.visible_fields %}{% if field != data %}
                    <th>{{ field.label|capfirst }}</th>
                  {% endif %}{% endfor %}
                </tr>
                </thead>
              {% endif %}
              <tr class="formset_row_perm">
                {% for field in form.visible_fields %}
                  <td>
                    {# Include the hidden fields in the form #}
                    {% if forloop.first %}
                      {% for hidden in form.hidden_fields %}
                        {{ hidden }}
                      {% endfor %}
                    {% endif %}
                    <div class="error-messages">{{ field.errors.as_ul }}</div>
                    {{ field }}
                  </td>
                {% endfor %}
              </tr>
            {% endfor %}
          </table>
          <div class="wizard_nav_bar">
            <button class="btn btn-info" name="wizard_goto_step" type="submit" value="project">1. Info</button>
            <button class="btn btn-info" name="wizard_goto_step" type="submit" value="labels">2. Labels</button>
            <input class="btn btn-primary" type="submit" value="Next Step"/>
            <p class="pull-right">Step {{ wizard.steps.step1 }} of {{ wizard.steps.count }}</p>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts_body %}
<script type="text/javascript">
$('.formset_row_perm').formset({
  addText: 'add permissions',
  deleteText: 'remove permission',
  prefix: 'permission_set',
  added: function() {
    // Reset drop down and errors from both columns when adding new rows
    $('tr.formset_row_perm').last().children(':first').find('option:eq(0)').prop('selected', true);
    $('tr.formset_row_perm').last().children().eq(1).find('option:eq(0)').prop('selected', true);
    $('tr.formset_row_perm').last().children(':first').find('ul.errorlist li').empty();
    $('tr.formset_row_perm').last().children().eq(1).find('ul.errorlist li').empty();
  }
});
</script>
{% endblock %}
